<template>
	<view class="myList1">


		<view class="card">
			<view style="justify-content: flex-start;align-items: baseline;" class="flexRowAndNoWrapBetween">
				<view class="flexRowAndNoWrap">
					<u-jk-avatar :style="{marginRight:'30rpx'}" size='large' :src="userInfo.avatar"
						v-if="userInfo.avatar"></u-jk-avatar>
					<u-jk-avatar :style="{marginRight:'30rpx'}" size='large' bg-color='#36daeb'
						:text="userInfo.username" v-if="!userInfo.avatar"></u-jk-avatar>
					<!-- <image src="/static/sex0.png" class="head-avatar"></image> -->
					<view class="flexColumnAndBetween">
						<view class="user-name">{{userInfo.username}}</view>
						<view class="msgtxt">
							<text>集团客户服务部</text> <text class="mg">|</text> <text>{{userInfo.station}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="card">
			<view class="txttitle">基础信息</view>
			<view class="txtcontent">
				<!-- <view class="itemContent">部门：集客</view>
				<view class="itemContent">小组：前端开发小组</view> -->
				<view class="itemContent">岗位：{{userInfo.station}}</view>
				<view class="itemContent">邮箱：{{userInfo.email}}</view>
			</view>
			<view class="card_iocn" @click="modifyShow">
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>


		<view class="card">
			<view class="txttitle">年度加班/调休信息</view>
			<view class="flexRowAndNoWrapBetween" click='goEmp'>
				<view class="itemContent txtCenter">
					本年度共加班
					<text class="redTxt">{{workTotal}}</text>
					天，已调休
					<text class="redTxt">{{releaxTotal}}</text>
					天，剩余调休
					<text class="redTxt">{{workTotal-releaxTotal}}</text>
					天
				</view>
				<!-- <view>
					<image style="width: 24rpx; height: 36rpx;" src="../../static/arrow-rights.png" mode="aspectFill"></image>
				</view> -->
			</view>

			<view class="txtCenter annotation">(注：此数据仅统计本年度加班调休信息)</view>
		</view>

		<view class="card">
			<view>
				<u-cell-group>
					<u-cell-item icon="setting" title="修改密码" @tap='restPsw(1)'></u-cell-item>
					<!-- <u-cell-item icon="account" title="员工管理" @tap='goEmp()'></u-cell-item> -->
					<u-cell-item icon="account" title="退出登录" @tap='logout()'></u-cell-item>
				</u-cell-group>
			</view>
		</view>
			<u-tabbar :list="vuex_tabbar"  :icon-size="vuex_tabbar_icon_size" :active-color="vuex_tabbar_active_color"></u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				workTotal: 0,
				releaxTotal: 0,
			}
		},
		onLoad() {

		},
		methods: {
			restPsw(type) { //1:修改密码；2:重置密码

				uni.navigateTo({
					url: '../my/rest?type=' + type
				})
			},
			goEmp() {
				uni.switchTab({
					url: '../emp/empList'
				})
			},
			//退出登录
			logout(){
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定退出登录吗？',
					icon:'warning',
					confirmColor: '#f55850',
					success: function (res) {
						if (res.confirm) {
							that.request('common/user/logout', {}).then(res => {
								if (res.code == 0) {
									uni.reLaunch({
										url: '../login/login'
									})
								}
							})
						} else if (res.cancel) {
						}
					}
				});
				
			},
			getUser() {
				// console.log(uni.getStorageSync('uid'))
				this.request('common/user/getUser', {
					uid: uni.getStorageSync('uid')
				}).then(res => {
					if (res.code == 0) {
						console.log(res)
						this.userInfo = res.userInfo
						// this.userInfo.avatar = '/static/sex0.png'
					} else {
						uni.showModal({
							showCancel: false,
							content: res.msg
						})
					}
				})
			},
			getWorkReleaxLength() {
				this.request('business/work/getWorkReleaxLength', {
					uid: uni.getStorageSync('uid')
				}).then(res => {
					this.workTotal = res.data.workTotal
					this.releaxTotal = res.data.releaxTotal
				})
			},

			modifyShow() {
				// 打开修改页面
				uni.navigateTo({
					url: './modify?email=' + this.userInfo.email + '&station=' + this.userInfo.station + '&username=' +this.userInfo.username,
					fail(e) {
						console.log(e)
					}
				});
			}
		},
		mounted() {
			this.getUser()
			this.getWorkReleaxLength()
		}

	}
</script>

<style lang="scss">
	page {
		background-color: #ededed;
	}

	.camera {
		width: 54px;
		height: 44px;

		&:active {
			background-color: #ededed;
		}
	}

	.user-box {
		background-color: #fff;
	}

	.myList1 {
		.card {
			background-color: #FFFFFF;
			margin: 20rpx 20rpx;
			padding: 20rpx 20rpx;
			border-radius: 20rpx;
			box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);

			.txttitle {
				font-weight: bolder;
				margin-bottom: 20rpx;
			}

			.txtCenter {
				width: 100%;
				text-align: center;
				margin-bottom: 20rpx;
			}

			.annotation {
				font-size: 24rpx;
				color: f#C0C0C0;
			}

			.txtcontent {
				margin-left: 40rpx;

				.itemContent {
					margin-bottom: 20rpx;

					.redTxt {
						color: red;
					}
				}
			}

			// .txtRight{
			// 	float: right;
			// }
			.flexRowAndNoWrapBetween {
				display: flex;
				display: -webkit-flex;
				flex-flow: row nowrap;
				align-items: center;
				justify-content: space-between;

				.flexRowAndNoWrap {
					display: flex;
					display: -webkit-flex;
					flex-flow: row nowrap;
					align-items: center;
				}


				.head-avatar {
					width: 136rpx;
					height: 136rpx;
					margin-right: 30rpx;
					border: solid 2rpx #ededed;
					border-radius: 100%;
				}

				.user-name {
					font-size: 44rpx;
					color: #333;
					font-weight: bold;
					margin: 10rpx 0rpx 10rpx 5rpx;
				}

				.msgtxt {
					font-size: 24rpx;
					margin-left: 10rpx;

					.mg {
						margin: 0 20rpx;
					}
				}


				.user-data {
					margin-top: 10rpx;
					align-items: center;

					.person-data-text {
						color: #999999;
						font-size: 24rpx;
					}

					.person-data-img {
						width: 34rpx;
						height: 32rpx;
						margin-right: 10rpx;
					}
				}
			}

			.card_iocn {
				display: flex;
				justify-content: flex-end;
				padding-right: 40rpx;
				position: relative;
			}
		}
	}
</style>
